<template>
    <div class="crud-container">
        <avue-crud
            v-model:search="searchForm"
            :table-loading="loading"
            :data="data"
            :option="option"
            @on-load="onLoad"
            @search-change="handleSearchChange"
            @update:search="searchForm"
        >
            <!-- 自定义右侧菜单 -->
            <template #menu-right="{ row }">
                <el-button type="warning" size="small" @click="handleDataSource(row)"> 数据源</el-button>
            </template>

            <!-- 状态列插槽 -->
            <template #status="{ row }">
                <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                    {{ getStatusText(row.status) }}
                </el-tag>
            </template>

            <!-- 自定义操作栏 -->
            <template #menu="{ row }">
                <el-button type="text" size="small" @click="handleBusinessFunction(row)"> 业务功能</el-button>
            </template>

            <!-- 表单状态插槽 -->
            <template #statusForm="{ value }">
                <el-tag :type="value === 1 ? 'success' : 'danger'">
                    {{ getStatusText(value) }}
                </el-tag>
            </template>
        </avue-crud>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import avueSetting from "@/config/avueSetting";
import { useNoPage } from "@/hooks/useNoPage";

// 常量定义
const urls = {
    0: "routes",
    1: "getAsyncRoutes"
};

/**
 * 获取状态文本
 */
const getStatusText = (status: number): string => {
    return (
        {
            1: "正常",
            0: "不正常"
        }[status] || "未知"
    );
};

/**
 * 数据回调处理
 */
const dataCallBack = async (resData: any) => {
    data.value = Array.from({ length: 15 }, (_, index) => ({
        id: index,
        schoolName: "望夏雨",
        location: "北京市",
        people: "撒打算",
        phone: "13522322233",
        cover: "https://q9.itc.cn/q_70/images01/20250115/a18c4bf7787b4f7aaeea301ac63b38e6.jpeg",
        status: 1
    }));
};

/**
 * 搜索变化处理
 */
const handleSearchChange = (params: any, done?: () => void) => {
    console.log("搜索参数:", params);
    // TODO: 实现实际的搜索逻辑
    if (done) done();
};

/**
 * 数据源按钮点击
 */
const handleDataSource = (row: any) => {
    console.log("数据源:", row);
    ElMessage.info("数据源功能开发中");
};

/**
 * 业务功能按钮点击
 */
const handleBusinessFunction = (row: any) => {
    console.log("业务功能:", row);
    ElMessage.info("业务功能开发中");
};

// 使用分页 Hook
const { onLoad, getData, data, loading, searchForm } = useNoPage({
    dataCallBack,
    urls
});

// 表格配置选项
const option = computed(() => ({
    ...avueSetting.curd,
    calcHeight: 80, // :calcHeight="180"  // 减去180px（假设搜索栏+分页栏+边距共180px）
    addBtn: true,
    viewBtn: true,
    delBtn: false,
    editBtn: false,
    menuWidth: 180,
    column: [
        {
            label: "地址",
            prop: "location",
            search: true,
            rules: [
                {
                    required: true,
                    message: "请输入地址",
                    trigger: "blur"
                }
            ]
        },
        {
            label: "联系人",
            prop: "people",
            rules: [
                {
                    required: true,
                    message: "请输入联系人",
                    trigger: "blur"
                }
            ]
        },
        {
            label: "联系方式",
            prop: "phone",
            rules: [
                {
                    required: true,
                    message: "请输入联系方式",
                    trigger: "blur"
                },
                {
                    pattern: /^1[3-9]\d{9}$/,
                    message: "请输入正确的手机号码",
                    trigger: "blur"
                }
            ]
        },
        {
            label: "封面图",
            prop: "cover",
            type: "upload",
            span: 24
        },
        {
            label: "状态",
            prop: "status",
            slot: true,
            type: "select",
            dicData: [
                { label: "正常", value: 1 },
                { label: "不正常", value: 0 }
            ],
            editDisplay: false,
            addDisplay: false
        }
    ]
}));
</script>

<style lang="scss" scoped>
.crud-container {
}
</style>
